<template>
  <div>
    <div style="margin-bottom: 10px;" class="btn-group">
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
      </div>
    </div>
    <el-table-form ref="form" :model="query">
      <el-form-item label="计划名称:" prop="name">
        <el-input v-model="query.name" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="配送时段:" :table-form-merge="2" class="merge-item">

        <!-- <el-date-picker
          v-model="query.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        /> -->
        <el-time-select
          v-model="query.startTime"
          placeholder="起始时间"
          :picker-options="{
            start: '00:00',
            step: '01:00',
            end: '23:00'
          }"
        />
        <el-time-select
          v-model="query.endTime"
          placeholder="结束时间"
          :picker-options="{
            start: '00:00',
            step: '01:00',
            end: '23:00',
            minTime: query.startTime
          }"
        />
      </el-form-item>
      <el-form-item label="状态" class="merge-item">
        <el-select v-model="query.status" style="width: 170px; margin-right: 2px;">
          <el-option label="启用" :value="2" />
          <el-option label="禁用" :value="1" />
        </el-select>
      </el-form-item>
      <template v-slot:btns>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </template>
    </el-table-form>
    <lb-table
      ref="lbTable"
      v-el-height-adaptive-table="{bottomOffset:10}"
      v-loading="$loadingPlugin.fetchData"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      @fetch="fetchData"
    />
    <add ref="add" />
    <planDetail ref="planDetail" />
    <peisongDetail ref="peisongDetail" />
  </div>
</template>

<script>
  import { parseTime } from '@/utils'
  import { orderSendPlanList, orderSendPlanChangeStatus } from '@/api'
  import tabData from './setData.json'
  export default {
    name: 'peiSongSetting',
    components: {
      add: require('./add.vue').default,
      planDetail: require('./planDetail.vue').default,
      peisongDetail: require('./peisongDetail.vue').default
    },
    data() {
      return {
        statusList: [{ 'value': 1, 'desc': '禁用', 'key': 'DISABLED' }, { 'value': 2, 'desc': '启用', 'key': 'ENABLED' }],
        query: {
          endTime: null,
          startTime: null
        },
        tableData: {
          total: 0,
          column: [
            // { type: 'expand', align: 'center', render: (h, { row, $index }) => {
            //   return (
            //       <div style='padding-left: 40px'>
            //       <span>{`最后一次配送执行时间：2021-10-20 21:02 执行情况：计划配送客户1，实际配送客户0， 点击查看`}</span>
            //        <el-link onClick={() => { this.peisongDetail(row) }} type='primary'>配送详情</el-link>
            //       </div>
            //     )
            // } },
            { label: '计划编号', prop: 'planCode', width: 120, align: 'center' },
            { label: '计划名称', prop: 'planName', width: 150, align: 'center' },
            { label: '配送时间', prop: 'sendTime', width: 100, align: 'center', formatter: this.sendTimeFormat },
            { label: '配送周期', prop: 'sendSchedule', width: '', align: 'center', formatter: this.sendScheduleFormat },
            { label: '下次配送时间', prop: 'nextSendTime', width: 180, align: 'center', formatter: this.dateTimeFormat },
            { label: '开始启用时间', prop: 'startTime', width: 200, align: 'center', formatter: this.dateTimeFormat },
            { label: '创建人', prop: 'createUser', width: 100, align: 'center' },
            { label: '备注', prop: 'remark', width: 200, align: 'center', showOverflowTooltip: true },
            { label: '状态', prop: 'status', width: 100, align: 'center', formatter: this.planStatusFormat },
            {
              label: '操作',
              align: 'center',
              fixed: 'right',
              width: 190,
              render: (h, { row, $index }) => {
                return (
                  <div>
                    <el-link size='mini' onClick={() => this.planDetail(row, $index)}>
                      计划详情
                    </el-link>
                    <el-link size='mini' onClick={() => this.edit(row, $index)}>
                      编辑
                    </el-link>
                    <el-link size='mini' type='danger' onClick={() => this.changeStatus(row, $index)}>
                      启/禁用
                    </el-link>
                  </div>
                )
              }
            }
          ],
          data: tabData.data.rows
        }
      }
    },
    methods: {
      // orderSendPlanList
      async fetchData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          'planName': this.query.name, 'status': this.query.status,
          currentPage,
          pageSize
        }
        var { startTime, endTime } = this.query
        if (startTime) {
          var sendTimeHouer = startTime.slice(0, 2)
          var sendTime = new Date('2000-01-01 00:00:00').setHours(sendTimeHouer * 1)
        } else {
          sendTime = null
        }
        if (endTime) {
          var sendTimeEndHouer = endTime.slice(0, 2)
          var sendTimeEnd = new Date('2000-01-01 00:00:00').setHours(sendTimeEndHouer * 1)
        } else {
          sendTimeEnd = null
        }
        params['sendTime'] = sendTime
        params['sendTimeEnd'] = sendTimeEnd
        const res = await orderSendPlanList(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
        // this.flexColumnWidth()
      },
      planDetail(row) {
        this.$refs.add.open(row, 'detail')
      },
      edit(row) {
        this.$refs.add.open(row)
      },
      async changeStatus(row) {
        const params = {
          planCode: row.planCode,
          status: row.status * 1 === 1 ? '2' : '1'
        }
        const res = await orderSendPlanChangeStatus(params)
        if (res.success) {
          this.$message.success('变更成功')
          this.fetchData({})
        }
      },
      add() {
        this.$refs.add.open()
      },
      search() {
        this.fetchData({})
      },
      peisongDetail(row) {
        this.$refs.peisongDetail.open(row)
      },
      dateTimeFormat: function(row, column, cellValue, index) {
        // console.log(row, column, cellValue, index)
        const val = row[column.property]
        if (val) {
          if (new Date(val).getYear() === 90) {
            return ''
          }
          return (parseTime(val, '{y}-{m}-{d} {h}:{i}'))
        } else {
          return ''
        }
      },
      planStatusFormat: function(row, column, cellValue, index) {
        // console.log(row, column, cellValue, index)
        const val = row[column.property]
        if (val) {
          return this.statusList.find(l => l.value === val).desc
        } else {
          return ''
        }
      },
      sendTimeFormat: function(row, column, cellValue, index) {
        const val = row[column.property]
        return (parseTime(val, ' {h}')) + '点'
      },
      sendScheduleFormat: function(row, column, cellValue, index) {
        if (!row.sendSchedule) {
          return
        }
        if (row.sendType === 1) {
          var result = row.sendSchedule.split(',').map(function(item) {
            return item + '号'
          })
          return result.join(',')
        }
        if (row.sendType === 2) {
          var obj = {
            '1': '周一',
            '2': '周二',
            '3': '周三',
            '4': '周四',
            '5': '周五',
            '6': '周六',
            '7': '周日'
          }
          result = row.sendSchedule.split(',').map(function(item) {
            return obj[item]
          })
          return result.join(',')
        }
        if (row.sendType === 3) {
          return `每${row.sendSchedule}天`
        }
      }

    }
  }
</script>

<style lang="scss" scoped>

</style>
